<script>
// 小说内容
import { onBeforeUnmount, ref } from "vue";
import { Toast } from "vant";
import { reactive, toRefs } from "@vue/reactivity";
import { getdetails } from "../api/novalCotent";
import { useRouter } from "vue-router";
import { onMounted, onUnmounted } from "@vue/runtime-core";
import { getcatalogue } from "../api/details";
import { Dialog } from "vant";

// import { catalogueView}  from "../components/catalogueView.vue"

export default {
  setup() {
    const VanDialog = Dialog.Component;
    const imgs = ref(null);
    let list = reactive({
      emid: 0, //书本id
      ye_index: 0, //章节id
      flag: true,
      defaultFont: "12", //字体大小
      lists: null, //数据
      tilte: [], //文章
      tiltes: [], //内容数组
      classNUm: "", //切换背景
      bg_index: 1, //切换背景下标
      bg_flag: true, //白天黑夜

      slideidelist: null, //滑动数据
      btn_index: 0, //切换目录
      cataloguelist: null, //目录数据
      cataloguelistlength: 0, //目录数据长度
      showFlag: false, //显示目录
      sort_flag: false, //排序目录
      nextChapterId: null, //下一章id
      nexttilte: [], //下一章内容
      Unlocklist: [], //购买章节数组
      numlist: [], //存储充值金额
      nums: 0, //熊猫币
      Readinglist: [], //阅历记录数组
      value: 0, //进度条
    });

    //接受路由传参
    const router = useRouter();
    list.emid = router.currentRoute._value.query.id;
    list.ye_index = router.currentRoute._value.query.ye;

    let timelist = JSON.parse(localStorage.getItem("time"));
    let time = new Date().getTime();
    let timeData = [];
    timeData.push({
      into: time, //进来,
      leave: time, //离开
    });
    if (!timelist) {
      localStorage.setItem("time", JSON.stringify(timeData));
    }

    // let time = data.get
    console.log(list.emid, "书籍id");
    console.log(list.ye_index, "章节id");
    console.log(time, "进来时间");

    onMounted(() => {
      window.scrollTo(0, 0);

      //解锁章节  Unlock
      if (window.localStorage.getItem("Unlock") == null) {
        window.localStorage.setItem("Unlock", "[]");
      }

      //解锁章节初始化
      let Unlock = window.localStorage.getItem("Unlock");
      list.Unlocklist = JSON.parse(Unlock);
      //阅读记录
      if (window.localStorage.getItem("Reading") == null) {
        window.localStorage.setItem("Reading", "[]");
      }
 //本地存储熊猫币
      if (window.localStorage.getItem("panda") == null) {
        window.localStorage.setItem("panda", "[]");
      }
      //充值数组
      let panda = window.localStorage.getItem("panda");
      panda = JSON.parse(panda);
      list.numlist = panda;

      getnums();

      //监听屏幕，下拉加载

      window.onscroll = () => {
        if (imgs.value != null) {
          var scrollTop =
            document.documentElement.scrollTop || document.body.scrollTop;

   
          if (scrollTop + 800 >= imgs.value.clientHeight) {
            if (list.btn_index >= list.cataloguelistlength - 1) {
              console.log("不想加载");
              list.cataloguelist[list.cataloguelistlength - 1].subscribe = 1;
              return;
            }
            console.log("到底了");

            list.cataloguelist[list.btn_index].subscribe = 0;

            list.btn_index += 1;
            list.value = list.btn_index;

            list.cataloguelist[list.btn_index].subscribe = 1;

            list.ye_index = list.nextChapterId;
            isUnlock(list.nexttilte);

            getnums();
            list.tiltes.push(list.nexttilte);
            list.tilte=list.nexttilte
            console.log(list.value, "滚动的下标");
            if (list.value == list.cataloguelistlength - 1) {
              console.log("不想加载最后一章");
              return;
            } else {
              //预先加载下一章
              getdetails(list.emid, list.nextChapterId).then((data) => {
                list.nextChapterId = data.data.nextChapterId;
                getdetails(list.emid, list.nextChapterId).then((data) => {
                  list.nexttilte = {
                    list: data.data.content[0].text.split("\n"),
                    name: data.data.name,
                    vip: data.data.isVIP.id,
                    id: data.data.id,
                  };
                });
              });
            }
          }
        }
      };

      //  移除监听
      onUnmounted(() => {
        console.log("页面销毁");
        window.onscroll = null;
        console.log(list.tilte, "章节数据");

        //

        let Reading = window.localStorage.getItem("Reading");
        list.Readinglist = JSON.parse(Reading);
        //去除
        list.Readinglist = list.Readinglist.filter((item) => {
          return item.bookId != list.emid;
        });

        //添加
        list.Readinglist.push({
          bookId: list.emid,
          chapterId: list.tilte.id,
          name: list.tilte.name,
        });
        list.Readinglist = JSON.stringify(list.Readinglist);
        window.localStorage.setItem("Reading", list.Readinglist);
      }),
        getlistfun(list.emid, list.ye_index);
      //  目录数据
      getcatalogue(list.emid).then((data) => {
        list.cataloguelist = [];
        for (let i = 0; i < data.data.volumes.length; i++) {
          for (let j = 0; j < data.data.volumes[i].chapters.length; j++) {
            list.cataloguelist.push(data.data.volumes[i].chapters[j]);
          }
        }

        list.cataloguelistlength = list.cataloguelist.length;
        console.log(list.cataloguelist.length, "这个是目录长度");

        //获取value
        let index = list.cataloguelist.findIndex((item) => {
          return item.chapterId == list.ye_index;
        });
        list.value = index - 1;
        if (list.value < 0) {
          list.value = 0;
        }
        console.log(list.value, "vaule下标");

        // 获取id对应的目录下标
        list.btn_index = list.cataloguelist.findIndex(
          (item) => item.nextChapterId == list.ye_index
        );
        list.btn_index += 1;
        if (list.btn_index == -1) {
          list.cataloguelist[0].subscribe = 1;
          list.btn_index = 0;
        } else {
          list.cataloguelist[list.btn_index].subscribe = 1;
        }
        list.slideidelist = list.cataloguelist;
      });
    });
    //切换显示隐藏目录
    const catalogueFun = () => {
      list.showFlag = !list.showFlag;
    };

    //排序
    let sortFun = () => {
      Toast.success("切换成功");
      if (list.sort_flag) {
    list.cataloguelist=list.cataloguelist.reverse()
        list.sort_flag = !list.sort_flag;
      } else {
       list.cataloguelist=list.cataloguelist.reverse()
        list.sort_flag = !list.sort_flag;
      }
      console.log(list.cataloguelist);
    };

    // 切换目录
    let switchFun = (id) => {
      console.log('wwwwwwww');
      list.btn_index = id;
      list.cataloguelist.forEach((item, index) => {
        if (index == id) {
          item.subscribe = 1;
        } else {
          item.subscribe = 0;
        }
      });
      if (id == 0) {
        list.ye_index = list.cataloguelist[id].chapterId;
      } else {
        list.ye_index = list.cataloguelist[id - 1].nextChapterId;
      }

      getdetails(list.emid, list.ye_index).then((data) => {
        list.lists = data.data;
        list.tiltes = [];
        list.tilte = {
          list: data.data.content[0].text.split("\n"),
          name: data.data.name,
          vip: data.data.isVIP.id,
          id: data.data.id,
        };
        isUnlock(list.tilte);
        console.log(list.tilte, "banp");

        list.tiltes.push(list.tilte);

        window.scrollTo(0, 0);
    
        //下一章内容
        if (list.nextChapterId) {
          list.nextChapterId = data.data.nextChapterId;
          getdetails(list.emid, list.nextChapterId).then((data) => {
            console.log(data.data, "4567");
            list.nexttilte = {
              list: data.data.content[0].text.split("\n"),
              name: data.data.name,
              vip: data.data.isVIP.id,
              id: data.data.id,
            };
          });
        }
      });

      list.showFlag = false;
      Toast.success("切换目录成功");
    };

    let background = JSON.parse(localStorage.getItem("backrorund"));
    if (background) {
      list.classNUm = background[0].bg;
      list.defaultFont = background[0].size;
      list.bg_index = background[0].b_index;
      list.bg_flag = background[0].bg_flag;
    } else {
      list.classNUm = "bg-color_a";
      list.defaultFont = "16";
      list.bg_index = 1;
      list.bg_flag = false;
    }

    // 内容数据
    let getlistfun = () => {
      getdetails(list.emid, list.ye_index).then((data) => {
        list.lists = data.data;

        list.nextChapterId = data.data.nextChapterId;
        console.log(data.data.nextChapterId, 1234);
        list.tilte = {
          list: data.data.content[0].text.split("\n"),
          name: data.data.name,
          vip: data.data.isVIP.id,
          id: data.data.id,
        };

        isUnlock(list.tilte);
        list.tiltes.push(list.tilte);
        console.log(list.nextChapterId,'下个章节的id');
        //请求下一章内容
   if(list.nextChapterId){
         getdetails(list.emid, list.nextChapterId).then((data) => {
          console.log(data.data, "4567");
          list.nexttilte = {
            list: data.data.content[0].text.split("\n"),
            name: data.data.name,
            vip: data.data.isVIP.id,
            id: data.data.id,
          };
        });
   }
      });
    };

    // 切换背景色
    let bgFun = (bg) => {
      list.bg_index = bg;
      if (bg == 0) {
        list.classNUm = "bg-color_a";
      } else if (bg == 1) {
        list.classNUm = "bg-color_a";
      } else if (bg == 2) {
        list.classNUm = "bg-color_b";
      } else if (bg == 3) {
        list.classNUm = "bg-color_c";
      } else if (bg == 4) {
        list.classNUm = "bg-color_d";
      } else if (bg == 5) {
        list.classNUm = "bg-color_e";
      } else if (bg == 6) {
        list.classNUm = "bg-color_f";
      }
    };

    // 底部弹框
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };

    const shows = ref(false);
    const showPopups = () => {
      // show.value = false;
      shows.value = true;
    };
    // 章节

    const onChange = () => {
      console.log(list.value,'当前的val');
      //目标下标判断
      list.cataloguelist.forEach((item, i) => {
        if (i == list.value - 1) {
          item.subscribe = 1;
        } else {
          item.subscribe = 0;
        }
      });
      let id = null;
      if (list.value == 0) {
        id = list.cataloguelist[list.value].chapterId;
          list.btn_index = list.value ;
          list.cataloguelist[0].subscribe=1
      } else {
        id = list.cataloguelist[list.value - 1].chapterId;
          list.btn_index = list.value - 1;
      }
    

      getdetails(list.emid, id).then((data) => {
        list.lists = data.data;
        list.tiltes = [];
        list.tilte = {
          list: data.data.content[0].text.split("\n"),
          name: data.data.name,
          vip: data.data.isVIP.id,
          id: data.data.id,
        };

        isUnlock(list.tilte);
        list.tiltes.push(list.tilte);
        console.log(list.tiltes, "总数组");
        window.scrollTo(0, 0);
        getnums();
        //下一章内容
        list.nextChapterId = data.data.nextChapterId;
    if(list.nextChapterId){
          getdetails(list.emid, list.nextChapterId).then((data) => {
          console.log(data.data, "4567");
          list.nexttilte = {
            list: data.data.content[0].text.split("\n"),
            name: data.data.name,
            vip: data.data.isVIP.id,
            id: data.data.id,
          };
        });
    }
      });
    };

    //亮度
    const values = ref(0);
    const onChanges = (values) => Toast("当前亮度为：" + values + "%");
    // 字体减小
    let sub = () => {
      list.defaultFont--;
      list.defaultFont = list.defaultFont < 12 ? 12 : list.defaultFont;
      if (list.defaultFont == 12) {
        Toast("已是最小字体");
      }
    };

    //字体加大
    let add = () => {
      list.defaultFont++;
      list.defaultFont = list.defaultFont > 26 ? 26 : list.defaultFont;
      if (list.defaultFont == 26) {
        Toast("已是最大字体");
      }
    };

    // 白天黑夜切换
    let handoff = () => {
      list.bg_flag = !list.bg_flag;
      if (list.bg_flag) {
        list.classNUm = "bg-color_f";
        list.bg_index = 1;
      } else {
        list.classNUm = "bg-color_a";
        list.bg_index = 6;
      }
    };

    // 卸载后保存数据
    onBeforeUnmount(() => {
      let shulist = [];
      shulist.push({
        bg: list.classNUm,
        size: list.defaultFont,
        b_index: list.bg_index,
        bg_flag: list.bg_flag,
      });
      localStorage.setItem("backrorund", JSON.stringify(shulist));

      console.log(background, "离开后计算");

      let times = new Date().getTime();
      let locatime = JSON.parse(localStorage.getItem("time"));
      let leaveList = [];
      console.log(locatime, "111");
      console.log(locatime.into, "22");
      leaveList.push({
        into: locatime[0].into, //进来,
        leave: times, //离开
      });
      localStorage.setItem("time", JSON.stringify(leaveList));
    });

    // 点击显示目录
    let showmuFun = () => {
      list.showFlag = !list.showFlag;
      console.log(list.cataloguelist);
      //判断是否解锁
      list.Unlocklist.forEach((item) => {
        if (item.bookId == list.emid) {
          list.cataloguelist.forEach((ele) => {
            if (ele.chapterId == item.ChapterId) {
              ele.isVIP.id = 0;
            }
          });
        }
      });
      getnums();
    };

    // 切换上一张
    let fextFun = () => {
      if (list.btn_index != 0) {
        Toast.success("切换上一章");

        list.cataloguelist[list.btn_index].subscribe = 0;
        list.btn_index -= 1;
        list.value = list.btn_index;
        list.cataloguelist[list.btn_index].subscribe = 1;
        console.log(list.btn_index, "当前下标");
        if (list.btn_index == 0) {
          list.ye_index = list.cataloguelist[0].chapterId;
          getdetails(list.emid, list.ye_index).then((data) => {
            list.lists = data.data;
            console.log(data.data, "sss");
            list.tiltes = [];
            list.tilte = {
              list: data.data.content[0].text.split("\n"),
              name: data.data.name,
              vip: data.data.isVIP.id,
              id: data.data.id,
            };
            //判断是否解锁
            isUnlock(list.tilte);
            list.tiltes.push(list.tilte);
            console.log(list.tiltes, "总数组");
            window.scrollTo(0, 0);
            getnums();
            //下一章内容
            list.nextChapterId = data.data.nextChapterId;
            getdetails(list.emid, list.nextChapterId).then((data) => {
              list.nexttilte = {
                list: data.data.content[0].text.split("\n"),
                name: data.data.name,
                vip: data.data.isVIP.id,
                id: data.data.id,
              };
            });
          });
          return;
        }
        list.ye_index = list.cataloguelist[list.btn_index - 1].nextChapterId;
        getdetails(list.emid, list.ye_index).then((data) => {
          list.lists = data.data;
          console.log(data.data, "sss");
          list.tiltes = [];
          list.tilte = {
            list: data.data.content[0].text.split("\n"),
            name: data.data.name,
            vip: data.data.isVIP.id,
            id: data.data.id,
          };
          //判断是否解锁
          isUnlock(list.tilte);
          list.tiltes.push(list.tilte);
          console.log(list.tiltes, "总数组");
          window.scrollTo(0, 0);
          getnums();
          //下一章内容
          list.nextChapterId = data.data.nextChapterId;
          getdetails(list.emid, list.nextChapterId).then((data) => {
            console.log(data.data, "4567");
            list.nexttilte = {
              list: data.data.content[0].text.split("\n"),
              name: data.data.name,
              vip: data.data.isVIP.id,
              id: data.data.id,
            };
          });
        });
      } else {
        Toast.fail("现在是第一张内容");
      }
    };
    // 切换下一张
    let nextFun = () => {
      Toast.success("切换下一章");
      console.log(list.ye_index, "进来的id呐");
      console.log(list.btn_index, "当前章节的id");
     
      // console.log(list.ye_index, "进来的id呐");
      
      console.log(list.cataloguelistlength,'完整长度');
      console.log(list.cataloguelist[list.btn_index].nextChapterId);
      if (list.btn_index != list.cataloguelist.length - 1) {
        list.ye_index = list.cataloguelist[list.btn_index].nextChapterId;
        list.cataloguelist[list.btn_index].subscribe = 0;

        list.btn_index += 1;
        list.value = list.btn_index;
        list.cataloguelist[list.btn_index].subscribe = 1;
        getdetails(list.emid, list.ye_index).then((data) => {
          list.lists = data.data;
          list.tiltes = [];
          list.tilte = {
            list: data.data.content[0].text.split("\n"),
            name: data.data.name,
            vip: data.data.isVIP.id,
            id: data.data.id,
          };

          isUnlock(list.tilte);
          list.tiltes.push(list.tilte);
          console.log(list.tiltes, "总数组");
          window.scrollTo(0, 0);
          getnums();
          console.log(list.btn_index, "当前章节的下标");
          //下一章内容
          if(list.btn_index+1==list.cataloguelistlength){
            return
          }
          list.nextChapterId = data.data.nextChapterId;
          getdetails(list.emid, list.nextChapterId).then((data) => {
            console.log(data.data, "4567");
            list.nexttilte = {
              list: data.data.content[0].text.split("\n"),
              name: data.data.name,
              vip: data.data.isVIP.id,
              id: data.data.id,
            };
          });
        });
      } else {
        Toast.fail("现在已经是最后一张");
      }
    };

    // 购买章节
    let getbuy = (item) => {
      console.log("点击购买");
      Dialog.confirm({
        title: "是否购买",
      })
        .then(() => {
          console.log(list.nums);
          if (list.nums <= 12) {
            Toast("余额不足请充值");
          } else {
            console.log("购买");
            item.vip = 0;
            console.log("123456");
            let Unlock = window.localStorage.getItem("Unlock");
            Unlock = JSON.parse(Unlock);
            Unlock.push({
              bookId: list.emid,
              ChapterId: item.id,
              vip: 0,
            });
            list.Unlocklist = Unlock;
            Unlock = JSON.stringify(Unlock);

            window.localStorage.setItem("Unlock", Unlock);
            getnums();
          }

          // console.log(list.Unlocklist);
        })
        .catch(() => {
          console.log("没有购买");
        });
    };

    //初始化解锁
    let isUnlock = (ele) => {
      list.Unlocklist.forEach((item) => {
        if (item.bookId == list.emid) {
          console.log("第一步");
          if (item.ChapterId == ele.id) {
            console.log("第二步");
            ele.vip = item.vip;
          }
        }
      });
    };

    //计算熊猫币
    let getnums = () => {
      list.nums = list.numlist.reduce((total, item) => {
        return (total += item.num);
      }, 0);

      if (list.Unlocklist.length > 0) {
        list.nums = list.nums - list.Unlocklist.length * 12;
        console.log(list.nums, "余额");
      }
    };

    return {
      getlistfun,
      fextFun,
      nextFun,
      list,
      show,
      showmuFun,
      bgFun,
      showPopup,
      shows,
      showPopups,
      sub,
      add,

      onChange,
      values,
      onChanges,
      handoff,
      ...toRefs(list),
      catalogueFun,
      sortFun,
      switchFun,
      imgs,
      getbuy,
      VanDialog,
      isUnlock,
      getnums,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
};
</script>
<template>
  <!-- 小说内容 -->

  <div :class="`novel ${classNUm}`">
    <div class="novel_box" v-if="lists">
      <div class="novel_name">{{ lists.bookName }}</div>

      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="content_box" is-link @click="showPopup" ref="imgs">
            <div
              class="iii"
              v-for="(item, index) in tiltes"
              :key="index + item"
            >
              <div
                class="novel_title"
                :style="{ fontSize: list.defaultFont + 'px' }"
              >
                {{ item.name }}
              </div>

              <div
                class="content"
                :style="{ fontSize: list.defaultFont + 'px' }"
                v-if="item.vip == 0"
              >
                <p v-for="(k, i) in item.list" :key="i + k">
                  {{ k }}
                </p>
                <div class="foot"></div>
              </div>
              <!-- vip解锁 -->
              <div class="vip_conteng" v-if="item.vip == 1">
                <p v-for="(k, i) in item.list" :key="i + k" v-show="i <= 2">
                  {{ k }}
                </p>

                <div class="unlock">
                  <div class="balance">余额：{{ nums }}熊猫币</div>
                  <div class="buy" @click.stop="getbuy(item)">
                    订阅 （12熊猫币）
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>

    <!-- <van-popup v-model:show="show">内容</van-popup> -->
    <div class="buttom">
      <van-popup
        v-model:show="show"
        position="bottom"
        :style="{ height: '17%' }"
      >
        <div class="top">
          <p @click="fextFun">上一章</p>
          <van-slider
            v-model="value"
            :max="cataloguelistlength"
            @change="onChange"
            bar-height="2px"
            active-color="#434343"
          />
          <p @click="nextFun">下一章</p>
        </div>
        <div class="btn_bottom">
          <!-- 返回 -->
          <div class="back_l">
            <span
              @click="$router.go(-1)"
              class="iconfont icon-zuojiantou-copy"
            ></span>
            <p>退出</p>
          </div>
          <!-- 目录 -->
          <div class="btn" @click="showmuFun">
            <span class="iconfont icon-gengduo2"></span>
            <p>目录</p>
          </div>
          <!-- 夜间 -->
          <div class="btn" @click="handoff" v-if="list.bg_flag">
            <span class="iconfont icon-moonbyueliang"></span>
            <p>夜间</p>
          </div>
          <!-- 白天 -->
          <div class="btn" @click="handoff" v-if="!list.bg_flag">
            <span class="iconfont icon-weibiaoti-"></span>
            <p>白天</p>
          </div>

          <!-- 设置 -->
          <div class="btn" is-link @click="showPopups">
            <span class="iconfont icon-shezhi"></span>
            <p>设置</p>
          </div>
          <van-popup
            v-model:show="shows"
            position="bottom"
            :style="{ height: '23%' }"
          >
            <!-- 亮度 -->
            <div class="liangdu">
              <span class="iconfont icon-liangdu"></span>
              <van-slider
                v-model="values"
                @change="onChanges"
                bar-height="2px"
                active-color="#434343"
              />
              <span class="iconfont icon-liangdu"></span>
              <!-- <input type="checkbox" />
              <p class="purchase">自动订阅</p> -->
            </div>
            <!-- 背景色 -->
            <div class="bg_box">
              <div
                :class="
                  bg_index == 1 ? 'color bg-color_a con' : 'color bg-color_a'
                "
                @click="bgFun(1)"
              ></div>
              <div
                :class="
                  bg_index == 2 ? 'color bg-color_b con' : 'color bg-color_b'
                "
                @click="bgFun(2)"
              ></div>
              <div
                :class="
                  bg_index == 3 ? 'color bg-color_c con' : 'color bg-color_c'
                "
                @click="bgFun(3)"
              ></div>
              <div
                :class="
                  bg_index == 4 ? 'color bg-color_d con' : 'color bg-color_d'
                "
                @click="bgFun(4)"
              ></div>
              <div
                :class="
                  bg_index == 5 ? 'color bg-color_e con' : 'color bg-color_e'
                "
                @click="bgFun(5)"
              ></div>
              <div
                :class="
                  bg_index == 6 ? 'color bg-color_f con' : 'color bg-color_f'
                "
                @click="bgFun(6)"
              ></div>
            </div>
            <!-- 字体大小 -->
            <div class="font_size">
              <p>字体大小</p>
              <button class="sub" @click="sub">A-</button>
              <span>{{ list.defaultFont }}</span>
              <button class="add" @click="add">A+</button>
            </div>
          </van-popup>
        </div>
      </van-popup>
    </div>

    <main>
      <van-popup
        v-model:show="showFlag"
        position="left"
        :style="{ height: '100%' }"
      >
        <main>
          <div class="top">
            <i
              is-link
              @click="catalogueFun"
              class="iconfont icon-zuojiantou-copy"
            ></i>
            <span>目录</span>
            <i @click="sortFun" class="iconfont icon-paixu"></i>
          </div>
          <ul>
            <li
              @click="switchFun(index)"
              v-for="(item, index) in cataloguelist"
              :key="index + item"
            >
              <span :class="1 == item.subscribe ? 'active' : ''">{{
                item.chapterName
              }}</span>

              <i
                :class="['iconfont', 'icon-lock', { con: item.isVIP.id == 0 }]"
              ></i>
            </li>
          </ul>
        </main>
      </van-popup>
    </main>
  </div>
</template>

<style lang="scss" scoped>
.bg-color_a {
  background-color: #f5f3f3;
  color: #161616;
}
.bg-color_b {
  background-color: #e8cc8b;
  color: #684a1f;
}
.bg-color_c {
  background-color: #c2eeca;
  color: #425d46;
}
.bg-color_d {
  background-color: #fedfda;
  color: #7e444b;
}
.bg-color_e {
  background-color: #cde7ff;
  color: #4e678e;
}
.bg-color_f {
  background-color: #26354c;
  color: #64739b;
}
.buttom {
  ::v-deep {
    .van-overlay {
      background: rgba(0, 0, 0, 0.031);
    }
    .van-popup {
      padding: 15px 30px 8px 30px;
      box-sizing: border-box;
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .van-slider {
          width: 50%;
          background: #d2d2d2;
        }
        .van-slider__button {
          width: 19px;
          height: 19px;
          border: 1px solid #505050;
        }
      }
      .btn_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid #ccc;
        .back_l {
          .iconfont {
            font-size: 23px;
          }
          p {
            margin-top: 5px;
            font-size: 14px;
          }
        }
        .btn {
          color: #5c5c5c;
          display: flex;
          flex-direction: column;
          align-items: center;
          .iconfont {
            font-size: 20px;
            margin-bottom: 7px;
          }
          p {
            font-size: 14px;
          }
        }
        //   设置弹框
        .van-overlay {
          background: transparent;
        }
        .van-popup {
          padding: 15px 30px 0px 30px;
          box-sizing: border-box;
          .liangdu {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            .purchase {
              font-size: 13px;
            }
            .van-slider {
              width: 50%;
              background: #d2d2d2;
            }
            .van-slider__button {
              width: 19px;
              height: 19px;
              border: 1px solid #505050;
            }
            .iconfont {
              font-size: 25px;
            }
          }
          .bg_box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .color {
              width: 26px;
              height: 26px;
              border-radius: 50%;
              border: 1px transparent solid;

              &.con {
                border: 1px #868686 solid;
              }
            }
          }
          .font_size {
            display: flex;
            align-items: center;

            font-size: 13px;
            margin-top: 15px;
            p {
              font-size: 17px;
              margin-right: 20px;
            }
            button {
              padding: 10px 28px;
              background-color: #ffffff;
              color: #383838;
              border: 1px solid #727272;
            }
            span {
              padding: 10px 28px;
              border: #727272 solid;
              border-width: 1px 0 1px 0;
            }
            .sub {
              border-radius: 5px 0px 0px 5px;
            }
            .add {
              border-radius: 0px 5px 5px 0px;
            }
          }
        }
      }
    }
  }
}
.foot {
  width: 100%;
  height: 150px;
}
main {
  :deep {
    .van-popup {
      width: 80%;
    }
  }
  padding: 0 15px;
  position: relative;
  .top {
    top: 0;
    position: sticky;
    background-color: #fff;
    padding: 13px 0 22px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 14px;
      color: #00ba8a;
    }
  }
  ul {
    li {
      color: #bbb9b9;
      padding: 10px 0;
      display: flex;
      align-items: center;
      font-size: 13px;
      justify-content: space-between;
      i {
        font-size: 14px;
      }
      .active {
        color: #00ba8a;
      }
    }
    .con {
      // color: #333;
      display: none;
    }
  }
}
.novel {
  height: 100%;
  .novel_box {
    padding: 0 30px;
    height: 100%;
    .novel_name {
      font-size: 15px;
      color: #5b5b5b;
      padding-top: 15px;
    }
    .content_box {
      .novel_title {
        padding: 15px 0;
        // font-size: 25px;
        font-weight: 600;
        // color: #2a2a2a;
      }
      .content {
        width: 100%;
        min-height: 800px;
        font-size: 20px;
        p {
          padding: 10px 0;
          text-indent: 2em;
        }
      }
      .vip_conteng {
        width: 100%;
        height: 800px;
        font-size: 20px;
        p {
          padding: 15px 0;
          text-indent: 35px;
        }
        .unlock {
          padding-top: 20px;
          margin-top: 40px;
          padding: 20px 40px 0 40px;
          .balance {
            font-size: 17px;
            margin-bottom: 15px;
          }
          .buy {
            background-color: red;
            color: #fff;
            padding: 10px 45px;
            font-size: 16px;
            border-radius: 8px;
          }
        }
      }
    }
  }
}
</style>